<!-- templates/suggest.html -->
{% extends "base.html" %}
{% block title %}导航网站 - 提交建议{% endblock %}

{% block content %}
<h1 class="mb-5 text-center">提交网站建议</h1>

<div class="row justify-content-center">
    <div class="col-lg-6 col-xl-5">
        <form method="post">
            <div class="mb-4">
                <label for="email" class="form-label">通知人邮箱（可选）<i class="fa fa-envelope ms-2"></i></label>
                <input type="email" class="form-control" id="email" name="email" placeholder="请输入您的邮箱地址">
            </div>

            <div class="mb-4">
                <label for="site_name" class="form-label">网站名称<i class="fa fa-globe ms-2"></i></label>
                <input type="text" class="form-control" id="site_name" name="site_name"
                       placeholder="请输入网站名称" required>
            </div>

            <div class="mb-4">
                <label for="site_url" class="form-label">网址<i class="fa fa-link ms-2"></i></label>
                <input type="text" class="form-control" id="site_url" name="site_url"
                       placeholder="例如：https://example.com" required>
            </div>

            <div class="mb-4">
                <label for="site_logo" class="form-label">网址图标 URL<i class="fa fa-image ms-2"></i></label>
                <input type="text" class="form-control" id="site_logo" name="site_logo"
                       placeholder="例如：https://example.com/logo.png">
            </div>

            <div class="mb-4 text-center">
                <img src="{{ url_for('static', filename='img/default.png') }}" id="editWebsiteLogoPreview"
                     class="img-fluid rounded border p-1" alt="Logo 预览"
                     style="max-height: 50px;">
            </div>

            <div class="mb-4">
                <label for="site_description" class="form-label">推荐语</label>
                <textarea class="form-control" id="site_description" name="site_description" rows="4"
                          placeholder="请输入推荐语" required></textarea>
            </div>

            <div class="mb-4">
                <label for="category_id" class="form-label">网站分类<i class="fa fa-list ms-2"></i></label>
                <select class="form-select" id="category_id" name="category_id" required>
                    <option value="">请选择分类</option>
                    {% for cat in categories %}
                        <option value="{{ cat.id }}">{{ cat.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="mb-4">
                <small class="text-muted">
                    您的IP地址 {{ request.remote_addr }} 将会被记录，以帮助我们评估建议质量。
                </small>
            </div>

            <button type="submit" class="btn btn-primary btn-lg w-100">
                提交建议<i class="fa fa-arrow-right ms-2"></i>
            </button>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const websiteUrlInput = document.getElementById('site_url');
        const descriptionInput = document.getElementById('site_description');
        const categoryInput = document.getElementById('category_id');
        const logoInput = document.getElementById('site_logo');
        const logoPreview = document.getElementById('editWebsiteLogoPreview');

        // 表单校验
        document.querySelector('form').addEventListener('submit', function (event) {
            if (!websiteUrlInput.value.match(/^https?:\/\/[^ "]+$/)) {
                alert('请输入有效的网址！');
                event.preventDefault();
            }

            if (descriptionInput.value.length < 10) {
                alert('推荐语至少需要10个字符！');
                event.preventDefault();
            }

            if (categoryInput.value === "") {
                alert('请选择一个网站分类！');
                event.preventDefault();
            }
        });

        // 实时显示 Logo 预览
        const updateLogoPreview = () => {
            const url = logoInput.value.trim();
            console.log(url)
            if (url.match(/^https?:\/\/[^ "]+$/)) {
                logoPreview.src = url;
                logoPreview.style.display = 'inline-block';
            } else {
                logoPreview.src = "";
                logoPreview.style.display = 'none';
            }
        };

        logoInput.addEventListener('input', updateLogoPreview);
        updateLogoPreview(); // 页面加载时执行一次
    });
</script>
{% endblock %}
